<template>
  <div>
    <div class="open-btn-icon" v-show="!toolVisible">
      <el-tooltip class="item" effect="dark" content="地图工具" placement="bottom">
        <i class="iconfont icon-hanbao" @click="toolVisible= !toolVisible"></i>
      </el-tooltip>
    </div>
    <div class="tool" v-show="toolVisible">
      <div class="bottom">
        <div
          class="item"
          v-for="(item,index) in tools.bottom"
          :key="index"
          @click="changeBottomActive(index)"
        >
          <div>
            <div class="content" v-if="item.handle" @click="item.handle">
              <i :class="item.icon" :title="item.tooltip"></i>
              <span v-if="item.text">
                {{item.text}}
                <span v-if="item.location" id="region-name">{{item.location}}</span>
              </span>
            </div>
            <div v-else class="content">
              <i :class="item.icon" :title="item.tooltip"></i>
              <span v-if="item.text">
                {{item.text}}
                <span v-if="item.location" id="region-name">{{item.location}}</span>
              </span>
            </div>

            <span class="jgline" v-if="!item.islast">|</span>
          </div>
        </div>
        <div class="menu">
          <i class="iconfont icon-hanbao" @click="changeToolShow"></i>
        </div>
      </div>
    </div>

    <RegionPanel
      v-show="regionPanelVisible"
      :panelstatus="panelstatus"
      @screenRegionPanel="screenRegionPanel"
    ></RegionPanel>
    <SpatialQueryPanel v-show="SpatialQueryPanel" ></SpatialQueryPanel>
    <MapMeasure v-show="MeasureShow"></MapMeasure>
  </div>
</template>

<script>
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import * as bottomData from "./toolBottom.js"; // 底部工具栏默认数据引入
// import * as topData from "./toolTop.js"; // 顶部部工具栏默认数据引入
import * as Image from "./mkImage.js"; // 截图函数引入
import mapTool from "@/utils/map/sfgis.map.tool.js";
import RegionPanel from "@/components/RegionPanel/RegionPanel"; // 区划选择面板组件
import SpatialQueryPanel from "@/components/spatialQueryPanel/spatialQueryPanel"; // 空间查询面板组件
import MapMeasure from "@/components/Measure/MapMeasure"; // 量算操作面板
import sgisMapBase from "@/utils/map/sfgis.map.base";
export default {
  name: "MapTool",
  components: {
    RegionPanel, // 区划选择面板组件
    SpatialQueryPanel, // 空间查询面板组件
    MapMeasure // 量算操作面板组件
  },
  props: ["options", "image", "toolData", "panelstatus","hideMapToolItem"],
  data() {
    return {
      toolVisible: true, // 工具栏的可见性
      regionPanelVisible: false, //区划面板的可见性
      SpatialQueryPanel: false, //空间查询面板的可见性
      MeasureShow: false, // 量算操作可见性
      shotImageParams: {
        el: "map",
        insertEl: "app"
      }, // 截图默认传递的参数
      tools: {
        top: [],
        bottom: []
      },
      fullel: "map",
      zoneShow: false,
    };
  },
  mounted() {
    EventBus.$on("changeToolRegion", this.changeToolRegion);
  },
  beforeDestroy() {
    EventBus.$off("changeToolRegion", this.changeToolRegion);
  },
  watch: {
    toolData(val) {
      this.toolData = val;
      this.resertMapTool();
    },
    hideMapToolItem(val){
      this.regionPanelVisible = false;
      this.MeasureShow = false;
      this.SpatialQueryPanel = false;
    }
  },
  created() {
    this.initBottom();
    this.activeStatus();
  },
  methods: {
    resertMapTool(){
      this.initBottom();
      this.activeStatus();
    },
    //初始化工具栏
    initBottom() {
      let that = this;
      if(that.toolData&&that.toolData.hasOwnProperty("data")){
        if(that.toolData.data.length>0){
           that.tools.bottom = that.toolData.data;
        }
      }else{
        that.tools.bottom = bottomData.data;
      }
      try {
        if (this.options && this.options.hasOwnProperty("bottom")) {
          this.tools.bottom = this.options.bottom;
        }
      } catch (err) {
        console.log(err);
      } // 底部按钮显示赋值

      // 截图元素赋值
      if (this.image) {
        this.shotImageParams = this.image;
      }
      // 循环底部工具栏
      for (const key in this.tools.bottom) {
        for (const keyC in this.tools.bottom[key]) {
          if (this.tools.bottom[key][keyC]) {
            switch (keyC) {
              case "screenMap":
                this.tools.bottom[key].handle = this.screenshot;
                break;
              case "screenFull":
                this.tools.bottom[key].handle = this.fullScreen;
                this.fullel = this.tools.bottom[key].id;
                break;
              case "screenRegionPanel":
                this.tools.bottom[key].handle = this.screenRegionPanel;
                break;
              case "openSpatialQueryPanel":
                this.tools.bottom[key].handle = this.openSpatialQueryPanel;
                break;
              case "isShowMeasure":
                this.tools.bottom[key].handle = this.isShowMeasure;
                break;
              case "ZoneMarker":
                this.tools.bottom[key].handle = this.ZoneMarker;
                break;
              case "clearAll":
                this.tools.bottom[key].handle = this.clearAll;
                break;
              case "openSearchInfo":
                this.tools.bottom[key].handle = this.openSearchInfo;
                break;
            }
          }
        }
      }
    },
    openSearchInfo(){
      EventBus.$emit("changeSearchInfoPanelStatus");
    },
    // 全屏显示函数
    fullScreen() {
      Image.fullScreen(this.fullel);
      EventBus.$emit("fullScreen");
    },
    // 初始化按钮点击状态
    activeStatus() {
      for (const key in this.tools.bottom) {
        this.tools.bottom[key].isActive = false;
      }
    },
    // 点击图标改变显示状态
    changeBottomActive(index) {
      for (const key in this.tools.bottom) {
        this.tools.bottom[key].isActive = false;
      }
      this.tools.bottom[index].isActive = !this.tools.bottom[index].isActive;
      // 触发页面渲染操作
      const arr = this.tools.bottom.slice(0);
      this.$set(this.tools, "bottom", arr);
    },
    // 截图操作函数
    screenshot() {
      Image.screenshot(this.shotImageParams);
    },
    // 切换区划选择面板
    screenRegionPanel() {
      //先关闭掉其他面板
      this.SpatialQueryPanel = false;
      this.MeasureShow = false;
      this.regionPanelVisible = !this.regionPanelVisible;
    },
    //切换空间查询面板
    openSpatialQueryPanel() {
      //先关闭掉其他面板
      this.regionPanelVisible = false;
      this.MeasureShow = false;
      this.SpatialQueryPanel = !this.SpatialQueryPanel;
      EventBus.$emit("getRLevel",sgisRegionBase.regionInfos.getMaxLevel());
    },
    isShowMeasure() {
      // 先关闭其他面板
      this.SpatialQueryPanel = false;
      this.regionPanelVisible = false;
      this.MeasureShow = !this.MeasureShow;
    },
    changeToolShow() {
      if (this.toolVisible) {
        this.SpatialQueryPanel = false;
        this.regionPanelVisible = false;
        this.MeasureShow = false;
      }
      this.toolVisible = !this.toolVisible;
    },
    clearAll() {
      // if (this.$store.state.layer) {
      //   this.$store.commit("deleOverLayerData", true);
      //   this.$store.state.layer.remove();
      //   this.$store.state.layer = "";
      //   this.$store.commit("deletOtherLegend", true);
      // }
      mapTool.clearAllDrawFeatures();
      let userRegion = sgisRegionBase.regionInfos.getMaxRegionINfo();
      EventBus.$emit("changeToolRegion",userRegion,'toolClear');//工具栏清除后不再进行查询
      //用全局事件总线去清除查询结果
      EventBus.$emit("clearSearchResult");

      //用全局事件总线去清除地图播放
      EventBus.$emit("clearPlayMap");

      
    },
    //切换标签显隐
    ZoneMarker() {
      mapTool.ZoneMarkerShow(this.zoneShow);
      this.zoneShow = !this.zoneShow;
    },
    changeToolRegion(regions) {
      if (regions && regions.length) {
        let currentRegion = document.getElementById("region-name");
        // 修改工具条内容
        if (regions.length == 1) {
          currentRegion.textContent = regions[0].name;
        } else {
          currentRegion.textContent = "多区域";
        }
      }
    }
  }
};
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
@import "./../../assets/css/icon-font/iconfont.css";
@import "./../../assets/css/rule.scss";
$backColorBottom: rgba(12,71,100,1);
$backColorTop: #1f77b4;
$hoverBackColor: #e0e0e0;
$hei: 40px; //上下2个框高度
$topWidth: 90px; //上面盒子元素每个元素所占的宽度
$bottomWidth: 45px; // 下面盒子元素每个元素占得宽度
// $opacity: 0.5; //元素悬停时透明度设置
$hoverColor: #5a606b; //工具栏字体颜色
// $color: #5a606b; //悬停时字体颜色
$paddleft: 5px;
$line: #408bbf; //分割线颜色
.open-btn-icon {
  color:$fontColorW;
  position: absolute;
  right: 1px;
  top: 4px;
  color: #fff;
  background-color: #0c4764;
  padding: 8px 5px;
  border-radius: 2px;
}
.tool {
  width: auto;
  height: 36px;
  border-radius: 5px;
  color: $fontColor;
  box-sizing: border-box;
  font-family: $fontFamily;
  // border: 1px solid #cccccc;
  .bottom {
    background-color: $backColorBottom;
    box-sizing: border-box;
    height: 36px;
    padding-left: $paddleft;
    display: inline-block;
    border-radius: 2px;
    float: right;
    > div.item {
      display: inline-block;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      float: left;
      font-size: 1.4rem;
      .content {
        float: left;
        padding: 0 8px;
        margin: 1px 0;
        height: 34px;
        i {
          float: left;
          margin-right: 5px;
        }
      }
      .content:hover {
        color: $fontColorActive;
      }
      .jgline {
        float: left;
      }
    }
    > div.content {
      width: $bottomWidth;
    }
    .menu {
      margin: 10px;
      float: left;
    }
  }
  .active {
    background-color: $hoverBackColor !important;
    color: $hoverColor !important;
  }
  .deleteIcon {
    margin-top: 9px;
    font-size: 1.6rem;
  }
}
</style>
